<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

<style type="text/css">

.box {
    position: absolute;
    height: 30%;
    width: 30%;
    background-color: red;
    border-width: 1%;
    border-color: black; 
    border-style:solid;
    overflow: hidden; 
}

.headpic{
    background-image: url('headimages/1.jpg');
    height: 300px;
    width: 300px;
    background-color: blue;
    float: left;
}
.content{
    position: absolute;
    width: 60%;
    height: 100%;
}

.imgdivclass{
    width: 100%;
    height: 100%;
    display: block;
    font-size: 2em;
    color: red;
    text-align: center;

}

</style>

</head>
<body>


<div class="box">
    <div class="content">

    </div>
</div>



<div style="left: 50%;position: absolute;">
    <button id="btstop">stop</button>
    <button id="btstart">start</button>
    <button id="btadd">add</button>
</div>
</body>

<script type="text/javascript">

    
   

    var imagearray = [
    "headimages/1.jpg",
    "headimages/2.jpg",
    "headimages/3.jpg",
    "headimages/4.jpg",
    "headimages/5.jpg",
    "headimages/6.jpg",
    "headimages/7.jpg",
    "headimages/8.jpg",
    "headimages/9.jpg",
    "headimages/10.jpg",
    "headimages/11.jpg",
    "headimages/12.jpg"
    ];

    for (var j = 0; j < imagearray.length; j++) {
        var imgdiv = $('<div>');
        imgdiv.css('background-image','url('+imagearray[j]+')');
        imgdiv.addClass('imgdivclass');
        imgdiv.text(''+j)
        $('.content').append(imgdiv);
    }
    console.log($('.content')[0]);
    
    var imgdivlast = $('<div>');
    imgdivlast.css('background-image','url('+imagearray[imagearray.length-1]+')');
    imgdiv.text(''+imagearray.length-1);
    imgdivlast.addClass('imgdivclass');
    $('.content').prepend(imgdivlast);
    // $('.content').prepend("<img src="+imagearray[imagearray.length-1]+">");


    var isStopCardAnimation = false;

    showCardFlow($('.content'));


    

    $('#btstart').click(function(event) {


    });

    $('#btstop').click(function(event) {
        isStopCardAnimation = true;
        // $('.content').stop(false, true);
    });


    $('#btadd').click(function(event) {
    });


    //显示卡片闪动，需要传入一个容器,一个包含很多图片的容器
function showCardFlow(content) {
    isStopCardLoop = false;
    var childrenheight = $(content.children()[0]).height();
    var childNum = content.children().length;

    var imglastsecond_y = -(childrenheight * (childNum - 1));//倒数第一个子元素的左上角y坐标
    content.css('top', imglastsecond_y+"px");//初始化移动到倒数第一个
    var next = imglastsecond_y + childrenheight;//下一步要移动到倒数第二个
    var i = childNum - 2;

    function scrollToBottom(argument) {
        content.animate({
            'top': next+'px'
            },1000, function() {
                if(isStopCardLoop){
                    next+=childrenheight;
                    content.animate({
                        'top': next+'px'
                    },3000);
                    return;
                }

                if(i===0){
                    //移动到了顶部，顶部和倒数第一个是一样的，所以应该直接跳到倒数第一个再进行下一轮循环；
                    content.css('top',imglastsecond_y+'px');//重新移动到倒数第一个
                    next = imglastsecond_y+childrenheight;//下一步就是倒数第二个
                    i = childNum-2;//i也重新回到初始
                    scrollToBottom();
                }else{
                    i -=1;
                    next+=childrenheight;
                    scrollToBottom();
                }
        });
    }
    scrollToBottom();
}

</script>


</html>
